<template>
  <div id="mouse-position"></div>
  <div id="toggle">
    <img
      @click="handleTaggle('vector')"
      src="http://gis.x-zd.net/open-map/assets/vector.5cb7d6a8.png"
      alt=""
    />
    <img
      @click="handleTaggle('image')"
      src="http://gis.x-zd.net/open-map/assets/image.73771b41.png"
      alt=""
    />
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const handleTaggle = (type) => {
  if (type === 'image') {
    vectorLayer.setVisible(false);
  } else {
    vectorLayer.setVisible(true);
  }
}
//
let vectorLayer =null;

onMounted(() => {
  const map = proxy.$map

  // 添加导航控件,位置放在界面右边
  // const navControl = new ol.control.ZoomToExtent({
  //   extent: [100, 30, 140, 30],
  // })
  // map.addControl(navControl)

  // 添加鼠标位置坐标显示控件
  const mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: '&nbsp',
  })
  map.addControl(mousePositionControl)

  /* 比例尺 */
  const scaleLineControl = new ol.control.ScaleLine({
    units: 'metric',
  })
  map.addControl(scaleLineControl);

  //获取矢量图层和影像图层
  vectorLayer = map.getLayers().getArray()[1];
  let imgLayer = map.getLayers().getArray()[0];

  // 鹰眼控件
  const overviewMapControl = new ol.control.OverviewMap({
    /* 鹰眼控件样式  */
    className:'ol-overviewmap ol-custom-overviewmap',
    layers:[imgLayer,vectorLayer],
    /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
    collapseLabel:'\u00BB',
    /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
    label:'\u00AB',
    /* 初始为展开显示方式 */
    collapsed:false,
    view:new ol.View({
        projection:'EPSG:4326',
        minZoom:9,
        maxZoom:14
    })
})
map.addControl(overviewMapControl)
})
</script>

<style scoped>
:global(.ol-zoom-extent) {
    top: 8.643em;
    right: 0.5em;
    left: auto;
}

:global(.ol-zoom) {
    top: 4.5em;
    right: 0.5em;
    left: auto;
}
#mouse-position {
  position: fixed;
  bottom: 10px;
  z-index: 100;
  left: 50%;
  transform: translate(-50%);
  width: 200px;
  height: 40px;
  background-color: #7197b7;
  opacity: 0.6;
  text-align: center;
  line-height: 40px;
  color: #fff;
  border-radius: 5px;
}
#toggle {
  position: fixed;
  bottom: 35px;
  z-index: 100;
  left: 10px;
}
img {
  width: 80px;
  height: 80px;
  border: 1px solid #333;
  padding: 5px;
  margin: 5px;
  border-radius: 40%;
  cursor: pointer;
  transition: all 0.2s ease;
}
img:hover {
  transform: scale(1.05);
  border: 3px solid rgb(20, 151, 216);
}
:global(.ol-overviewmap) {
    left: 86em;
    bottom: 2.5em;
}
</style>
